<template>
  <div class="app-layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="dashboard-header">
      <div class="logo-area">
        <el-icon size="24"><User /></el-icon>
        <span class="logo-title">管理工具</span>
      </div>
      <el-menu mode="horizontal" :default-active="activeMenu" class="dashboard-menu" @select="onMenuSelect">
        <el-menu-item index="dashboard">仪表盘</el-menu-item>
        <el-menu-item index="user-management">用户管理</el-menu-item>
        <el-menu-item index="permission-management">权限管理</el-menu-item>
        <el-menu-item index="ai-model-config">大模型API</el-menu-item>
        <el-menu-item index="app-config">应用配置</el-menu-item>
        <el-menu-item index="cloud-storage">云存储</el-menu-item>
        <el-menu-item index="settings">全域配置</el-menu-item>
        <el-menu-item index="reports">订单管理</el-menu-item>
        <el-menu-item index="gray-release">灰度名单</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="dashboard-main">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeMenu = ref('dashboard')

// 定义菜单与路由的映射关系
interface MenuRouteMap {
  [key: string]: string;
  dashboard: string;
  'user-management': string;
  'permission-management': string;
  'ai-model-config': string;
  'app-config': string;
  'cloud-storage': string;
  settings: string;
  reports: string;
  'gray-release': string;
}

const menuRouteMap = reactive<MenuRouteMap>({
  'dashboard': '/',
  'user-management': '/user-management',
  'permission-management': '/permission-management',
  'ai-model-config': '/ai-model-config',
  'app-config': '/app-config',
  'cloud-storage': '/cloud-storage',
  'settings': '/settings',
  'reports': '/reports',
  'gray-release': '/gray-release',
})

// 定义已实现的菜单项
const implementedMenus = reactive(['dashboard', 'user-management', 'permission-management', 'ai-model-config', 'app-config', 'cloud-storage', 'settings', 'reports', 'gray-release'])

// 根据当前路由设置激活的菜单
const updateActiveMenu = () => {
  const routeName = route.name as string
  const routePath = route.path
  
  // 根据路由名称或路径匹配菜单
  if (routeName === 'home' || routePath === '/' || routePath === '') {
    activeMenu.value = 'dashboard'
  } else if (routeName) {
    // 优先从路由名称匹配（路由名称通常与菜单key一致）
    if (menuRouteMap[routeName]) {
      activeMenu.value = routeName
    } else {
      // 尝试从路径匹配
      const menuKey = Object.keys(menuRouteMap).find(key => {
        const menuPath = menuRouteMap[key]
        return routePath === menuPath || routePath === menuPath.replace(/^\//, '')
      })
      if (menuKey) {
        activeMenu.value = menuKey
      }
    }
  }
}

// 监听路由变化
watch(() => route.path, () => {
  updateActiveMenu()
}, { immediate: true })

const onMenuSelect = (index: string) => {
  const path = menuRouteMap[index]
  
  if (path && implementedMenus.includes(index)) {
    activeMenu.value = index
    router.push(path)
  } else {
    ElMessage.info('页面开发中')
  }
}
</script>

<style scoped>
.app-layout-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--el-bg-color);
  padding: 0 32px;
  height: 64px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-color-primary);
}

.dashboard-menu {
  flex: 1;
  margin: 0 40px;
  border-bottom: none;
}

.dashboard-main {
  flex: 1;
  padding: 32px 40px 24px 40px;
  background: var(--el-bg-color-page);
  overflow-y: auto;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

